<template>
  <div>
    <!--头部-->
    <el-header id="head">
      <div id="headCheck">
        <!-- 下拉选择学院 -->
        <span>学院：</span>
        <el-select
            class="term-select"
            @change="handleCollegesChange"
            v-model="collegeValue"
            placeholder="请选择学院"
        >
          <el-option v-for="(item,index) in collegeData" :key="index" :value="item"></el-option>
        </el-select>
        <!-- 下拉选择年级 -->
        <span style="margin-left: 10px">年级：</span>
        <el-select
            class="college-select"
            @change="handleGradesChange"
            v-model="gradeValue"
            placeholder="请选择年级"
        >
          <el-option v-for="(item,index) in gradeData" :key="index" :value="item"></el-option>
        </el-select>
        <!-- 下拉选择专业 -->
        <span style="margin-left: 10px">专业：</span>
        <el-select
            class="college-select"
            @change="handleMajorsChange"
            v-model="majorValue"
            placeholder="请选择专业"
        >
          <el-option v-for="(item,index) in majorData" :key="index" :value="item"></el-option>
        </el-select>

        <el-button type="warning" round @click="searchCourse" style="margin-left: 10px">搜索</el-button>
        <el-button type="primary" @click="addCPCourse">添加培养计划课程</el-button>
      </div>
    </el-header>

    <!--主体-->
    <el-main id="main">
      <template>
        <el-table
            :data="tableData"
            stripe
            border
            style="width: 100%"
        >
          <el-table-column
              fixed
              prop="courseIndex"
              label="课程编号"
          >
          </el-table-column>
          <el-table-column
              prop="courseName"
              label="课程名"
          >
          </el-table-column>
          <el-table-column
              prop="term"
              label="开课学期"
              :formatter="testMethodFormat"
          >
          </el-table-column>
          <el-table-column
              prop="status"
              label="课程性质"
              :formatter="statusFormat"
          >
          </el-table-column>
          <el-table-column
              prop="point"
              label="课程学分"
          >
          </el-table-column>
          <el-table-column
              prop="allPeriodTime"
              label="总课时"
          >
          </el-table-column>
          <el-table-column
              prop="weekTime"
              label="周课时"
          >
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
          >
            <template slot-scope="scope">
              <el-button
                  @click="editRow(scope.$index, scope.row)"
                  type="warning"
                  size="small">
                编辑
              </el-button>
              <el-button
                  @click="deleteRow(scope.$index, scope.row)"
                  type="danger"
                  size="small">
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

<!--======================-->

        <!--编辑对话框-->
        <el-dialog title="添加培养计划" :visible.sync="visible">
          <el-form :model="addCourseForm" label-position="left" label-width="80px" :rules="addCourseRules">
            <el-form-item label="学院" prop="college">
              <el-input
                  v-model="addCourseForm.college"
                  >
              </el-input>
            </el-form-item>
            <el-form-item label="年级" prop="grade">
              <el-input
                  v-model="addCourseForm.grade"
                  >
              </el-input>
            </el-form-item>

            <el-form-item label="专业" prop="major">
              <el-input
                  v-model="addCourseForm.major"
                  >
              </el-input>
            </el-form-item>

            <el-form-item label="课程代码" prop="courseIndex">
              <el-input
                  v-model="addCourseForm.courseIndex"
                  >
              </el-input>
            </el-form-item>

            <el-form-item label="课程名" prop="courseName">
              <el-input
                  v-model="addCourseForm.courseName"
                  >
              </el-input>
            </el-form-item>

            <el-form-item label="开设学期" prop="term">
              <el-input
                  v-model="addCourseForm.term"
                  >
              </el-input>
            </el-form-item>

            <el-form-item label="课程性质" prop="status">
              <el-select
                  class="term-select"
                  @change="handleCollegesChange"
                  v-model="addCourseForm.status"
                  placeholder="请选择课程性质"
              >
                <el-option v-for="item in statusData"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="学分" prop="point">
              <el-input
                  v-model="addCourseForm.point"
                  >
              </el-input>
            </el-form-item>

            <el-form-item label="总课时" prop="allPeriodTime">
              <el-input
                  v-model="addCourseForm.allPeriodTime"
                  type="number"
                  >
              </el-input>
            </el-form-item>

            <el-form-item label="周课时" prop="weekTime">
              <el-input
                  v-model="addCourseForm.weekTime"
                  type="number"
                  >
              </el-input>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取 消</el-button>
            <el-button type="primary" @click="submitCPCourse()">提 交</el-button>
          </div>
        </el-dialog>


      </template>
    </el-main>
    <el-footer id="footer">
      <!-- 上一页，当前页，下一页 -->
      <div class="footer-button">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="total">
        </el-pagination>
      </div>
    </el-footer>
  </div>
</template>

<script>
export default {
  name: "CultivationSystem",
  data() {
    return {
      college: '信息学院',
      collegeValue: "",
      collegeData: [],
      grade: '',
      gradeValue: '',
      gradeData: [],
      major: '',
      majorValue: '',
      majorData: [],
      visible : false,
      tableData: [],
      page: 1,
      pageSize: 10,
      total: 0,
      addCourseForm: {
        college: this.collegeValue,
        grade: this.gradeValue,
        major: this.majorValue,
        courseIndex: '',
        courseName: '',
        term: '',
        status: '',
        point: '',
        allPeriodTime: 0,
        weekTime: 0
      },
      // dialog表单验证规则
      addCourseRules: {
        college: [{required: true, message: '请输入学院', trigger: 'blur'}],
        grade: [{required: true, message: '请输入年级', trigger: 'blur'}],
        major: [{required: true, message: '请输入专业', trigger: 'blur'}],
        courseIndex: [{required: true, message: '请输入课程代码', trigger: 'blur'}],
        courseName: [{required: true, message: '请输入课程名', trigger: 'blur'}],
        term: [{required: true, message: '请输入开课学期', trigger: 'blur'}],
        status: [{required: true, message: '请选择课程状态', trigger: 'blur'}],
        point: [{required: true, message: '请输入本课学分', trigger: 'blur'}],
        allPeriodTime: [{required: true, message: '请输入总课时', trigger: 'blur'}],
        weekTime: [{required: true, message: '请输入周学时', trigger: 'blur'}]
      },
      statusData: [
        {
          label: '通识必修课',
          value: 1
        },
        {
          label: '通识选修课',
          value: 2
        },
        {
          label: '专业必修课',
          value: 3
        },
        {
          label: '专业选修课',
          value: 4
        }
      ],

    }
  },
  mounted() {
    this.getCollege();
    this.getGradeByCollege();
    this.getMajorByCollegeAndGrade()
  },
  watch:{
    collegeValue() {
      this.getGradeByCollege();
      this.getMajorByCollegeAndGrade();
    },
    gradeValue() {
      this.getMajorByCollegeAndGrade();
    }

  },
  methods: {
    // 获取所有学院
    getCollege() {
      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token');
      this.$axios(
          {
            method: "get",
            url: 'http://localhost:8085/chooselesson/courseInfoManagement/getAllColleges',
          }
      ).then(res => {
        if (res.data.code === 200) {
          let ret = res.data.data
          this.collegeData = ret.colleges

        }
      })
    },
    // 通过学院获取其全部历史学年
    getGradeByCollege() {
      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token');
      this.$axios(
          {
            method: "get",
            url: 'http://localhost:8085/chooselesson/cultivationSystem/getAllGrade/' + this.collegeValue
          }
      ).then(res => {
        if (res.data.code === 200) {
          this.gradeData = res.data.data

        }
      })
    },
    getMajorByCollegeAndGrade() {
      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token');
      this.$axios(
          {
            method: "get",
            url: 'http://localhost:8085/chooselesson/cultivationSystem/getMajorByCollegeAndGrade/' + this.collegeValue + '/' +this.gradeValue
          }
      ).then(res => {
        if (res.data.code === 200) {
          this.majorData = res.data.data

        }
      })
    },
    handleCollegesChange(val) {
      this.term = val;
      this.inputCourse = ''
      this.gradeValue = ''
      this.gradeData = []
      this.getGradeByCollege()
      this.majorValue = ''
      this.majorData = []
    },

    handleGradesChange(val) {
      this.gradeValue = val;
      this.majorValue = ''
      this.majorData = []
    },
    handleMajorsChange(val) {
      this.majorValue = val;
    },
    //
    addCPCourse() {
      this.visible = true;
      this.$set(this.addCourseForm, 'college', this.collegeValue);
      this.$set(this.addCourseForm, 'grade', this.gradeValue);
      this.$set(this.addCourseForm, 'major', this.majorValue);
    },

    searchCourse() {
      this.getTotalByCultivationPlan();
      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token');
      this.$axios(
          {
            method: "post",
            url: 'http://localhost:8085/chooselesson/cultivationSystem/getCultivationByCollegeAndGradeAndMajor',
            data: {
              college: this.collegeValue,
              grade: this.gradeValue,
              major: this.majorValue,
              page: this.page,
              pageSize: this.pageSize
            }
          }
      ).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data;
        }
      })
    },

    // 获取指定专业的培养计划课程总数
    getTotalByCultivationPlan() {
      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token');
      this.$axios(
          {
            method: "post",
            url: 'http://localhost:8085/chooselesson/cultivationSystem/getTotalByCultivationPlan',
            data: {
              college: this.collegeValue,
              grade: this.gradeValue,
              major: this.majorValue,
              page: this.page,
              pageSize: this.pageSize
            }
          }
      ).then(res => {
        if (res.data.code === 200) {
          this.total = res.data.data;
        }
      })
    },
    // 提交培养计划表单
    submitCPCourse() {

      this.$axios.defaults.headers.common['token'] = window.localStorage.getItem('token')
      this.$axios({
        method: 'post',
        url: "http://localhost:8085/chooselesson/cultivationSystem/addCultivationPlanCourse",
        data: this.addCourseForm
      }).then(res => {
        if (res.data.code === 200) {
          // 添加完成
          this.collegeValue = this.addCourseForm.college;
          this.gradeValue = this.addCourseForm.grade;
          this.majorValue = this.addCourseForm.major;
          this.visible = false
          this.searchCourse();
          this.$message({message: "添加培养计划成功！", type: "success"})
        } else {
          alert(res.data.message)
        }
      }).catch(error => {
      })
    },
    handleSizeChange(v) {
      this.pageSize = v;
      this.searchCourse();
    },
    handleCurrentChange(v) {
      this.page = v;
      this.searchCourse();
    },
  }
}
</script>
